<template>
  <div id="invite-friends">
    <app-header></app-header>
    <div class="invite-friends-box" v-if="invitation">
      <div class="friends-title">
        {{invitation.title}}
      </div>
      <div class="link-box">
        <ul>
          <li>
            <span>{{invitation.invited}}</span>
            <label for="" v-if="userInfo">{{this.tgame.num}}</label>
          </li>
          <li>
            <span v-if="userInfo">{{invitation.gained}} TGAME</span>
            <label for="" v-if="userInfo">{{this.tgame.award}}</label>
          </li>
        </ul>
        <div class="copy-box">{{copyCont}}</div>
        <div class="copy-btn" @click="handleCopy">{{invitation.copy}}</div>
      </div>
      <div class="baiwan-title">{{invitation.skills}}
        <span>{{invitation.successrate}}</span>
      </div>
      <div class="skills">
        <p>{{invitation.skills1}}</p>
        <p>{{invitation.skills2}}</p>
        <p>{{invitation.skills3}}</p>
        <p>{{invitation.skills4}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'vant'
  import Header from '@/components/component/header.vue'
  import Api from '@/axios'
  import {mapGetters} from 'vuex'

  export default {
    name: 'invite-friends',
    data() {
      return {
        copyCont: '',
        tgame: {}
      }
    },
    components: {
      'app-header': Header
    },
    computed: {
      ...mapGetters({
        invitation: 'invitation',
        userCode: 'userCodes',
        userInfo: 'userInfo'
      })
    },
    watch: {
      userCode(data) {
        this.copyCont = window.location.origin + '/#/?inviteCode=' + data
        this.getInformation(data)
      }
    },
    methods: {
      handleCopy(option, index) { // 复制详情
        let vm = this
        let copyCont = vm.userInfo.address
        if (!copyCont) {
          Toast.success('登录后可查看专属邀请链接!')
        }
        this.$copyText(this.copyCont).then(function (e) {
          if (e.text) {
            Toast.success('复制成功')
          }
        }, function (e) {
          alert('Can not copy')
          console.log(e)
        })
      },
      getInformation(code) {
        console.log(code)
        let param = {
          inviterAddress: code || '' // 邀请者地址
        }
        Api.getInfo(param).then(res => {
          let result = res.data
          if (result.code === 0) {
            this.tgame = result.data
          }
          console.log(this.tgame)
        })
      }
    },
    mounted() {
      this.copyCont = window.location.origin + '/#/?inviteCode=' + this.userCode
      console.log(this.copyCont)
    }
  }
</script>

<style lang="less" scoped>
  #invite-friends {
    width: 100%;
    height: auto;
    min-height: 100%;
    display: block;
    overflow: hidden;
    .invite-friends-box {
      width: 100%;
      height: auto;
      padding: 46px 24px;
      box-sizing: border-box;
      display: block;
      overflow: hidden;
      color: #FFFFFF;
      background: #020C47;
      .friends-title {
        width: 100%;
        height: auto;
        padding: 0 88px;
        box-sizing: border-box;
        display: block;
        overflow: hidden;
        font-family: PingFangSC-Medium;
        font-size: 32px;
        color: #FFFFFF;
        text-align: center;
        margin-bottom: 20px;
      }
      .link-box {
        width: 100%;
        height: auto;
        background: #1D1774;
        padding: 38px 30px;
        box-sizing: border-box;
        display: block;
        overflow: hidden;
        > ul {
          width: 100%;
          height: 131px;
          margin-bottom: 30px;
          display: flex;
          justify-content: space-between;
          > li {
            width: 280px;
            height: 131px;
            padding: 20px;
            box-sizing: border-box;
            background: #020C47;
            > span, > label {
              width: 100%;
              height: auto;
              line-height: 37px;
              display: block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap
            }
            > span {
              font-family: PingFangSC-Regular;
              font-size: 26px;
              color: #FFFFFF;
              text-align: center;
            }
            > label {
              font-family: PingFangSC-Medium;
              font-size: 40px;
              color: #F1D487;
              text-align: center;
              padding-top: 10px;
            }
          }
        }
        .copy-box {
          width: 100%;
          height: 76px;
          line-height: 76px;
          font-family: PingFangSC-Regular;
          font-size: 24px;
          color: #FFFFFF;
          background: #0C1C3B;
          text-align: center;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap
        }
        .copy-btn {
          width: 100%;
          height: 68px;
          line-height: 68px;
          background-image: linear-gradient(-90deg, #E1A982 0%, #F0D2BD 100%);
          border-radius: 4px;
          text-align: center;
          font-size: 28px;
          color: #3D1711;
          display: block;
          overflow: hidden;
          margin: 30px 0 40px 0;
        }

      }
    }
    .copy-text, .skills {
      width: 100%;
      height: auto;
      display: block;
      overflow: hidden;
      background: #1D1774 !important;
      > p {
        width: 100%;
        height: auto;
        display: block;
        overflow: hidden;
        font-family: PingFangSC-Regular;
        font-size: 26px;
        text-align: justify;
      }
    }
    .copy-text {
      > p {
        color: #BABABA;
        line-height: 46px;
      }
    }
    .skills {
      padding: 27px 31px 0 31px;
      box-sizing: border-box;
      background: #1E3054;
      > p {
        color: #FFFFFF;
        line-height: 37px;
        margin-bottom: 27px;
      }
    }
  }
</style>
